<template>
	<div class="wrap">
		<h1 class="title">电费缴纳</h1>
		<div class="pay">
			<el-form :model="payInfo" label-width="auto" style="max-width: 500px" label-position="top">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="选择楼栋">
							<el-select v-model.number="payInfo.buildId" placeholder="please select your zone">
								<el-option v-for="i in 20" :key="i" :label="`${i}栋`" :value="i" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="寝室号">
							<el-input v-model.number="payInfo.dormitory"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="缴纳金额">
							<el-input v-model.number="payInfo.electric" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="姓名">
							<el-input v-model.trim="payInfo.stuName"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 支付方式 -->

				<el-row :gutter="30">
					<el-col :span="5"> <img src="@/assets/img/pay.svg" width="50" @click="choiceWeChat" /></el-col>
					<el-col :span="5"> <img src="@/assets/img/zhifubao.svg" width="50" @click="choiceZhiFuBao" /></el-col>
				</el-row>

				<el-dialog v-model="showPayDialog" width="400">
					<div class="payDailog">
						<h2 class="title">欢迎使用: {{ payWay.way }}</h2>
						<div class="img" :style="{background:`url(${payWay.img}) no-repeat center/cover`}"></div>
						<p class="money">请扫码支付：{{ payInfo.electric }} 元</p>
					</div>
					<template #footer>
						<el-button type="primary" @click="handlePayElec">完成支付</el-button>
					</template>
				</el-dialog>
			</el-form>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useUserStore } from '@/stores/userStore'
import { updateElectric } from '@/utils/axios/stuReqest'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

// 引入图片 vite 引入
import weChatImage from '@/assets/img/pay1.jpg'
import zhiFuBaoImage from '@/assets/img/pay2.jpg'

const router=useRouter()

const { userInfo } = useUserStore()
const payWay = ref({
	way: '',
	img: '',
})

const showPayDialog = ref(false)
const payInfo = reactive({
	stuId: userInfo.stuId,
	stuName: userInfo.stuName,
	buildId: userInfo.buildId,
	dormitory: userInfo.dormitory,
	electric: '',
})


const choiceWeChat = () => {
	payWay.value.way = '微信'
	payWay.value.img = weChatImage
	showPayDialog.value = true
}
const choiceZhiFuBao = () => {
	payWay.value.way = '支付宝'
	payWay.value.img = zhiFuBaoImage
	showPayDialog.value = true
}

const handlePayElec = async () => {
	if (! payInfo.electric ) {
		showPayDialog.value=false
		return ElMessage.error({ message: '请输入金额',duration:1000 })
	}
	if (payInfo.electric < 0) {
		showPayDialog.value=false
		return ElMessage.error({ message: '金额不能小于0',duration:1000 })
	}
	if (payInfo.electric > 1000) {
		showPayDialog.value=false
		return ElMessage.error({ message: '金额不能大于1000',duration:1000 })
	}
	if (payInfo.electric % 10 != 0) {
		showPayDialog.value=false
		return ElMessage.error({ message: '金额必须为10的倍数',duration:1000 })
	}
	if (payInfo.electric == 0) {
		showPayDialog.value=false
		return ElMessage.error({ message: '金额不能为0',duration:1000 })
	}
	payInfo.electric = Number(payInfo.electric)
	await updateElectric(payInfo)
	router.push("/home/elinfo")
}
</script>

<style scoped lang="scss">
.title {
	font-size: 20px;
	font-weight: var(--fontweight);
	margin-bottom: 30px;
}

.payDailog {
	width: 300px;
	margin: auto;
}
.img {
	width: 200px;
	height: 200px;
	box-shadow: 0 0 3px #cccc;
	// background: url('@/assets/img/pay2.jpg') no-repeat center/cover;
}
.money {
	color: aqua;
	font-size: 20px;
}
</style>
